
@keyframes up {
    50% {transform:translateY(-50px)}
}

@keyframes dark {
    100% {background-color: #2a3f17 ;
            color:#fff;
    }
}

@keyframes big {
    50% {transform:scale(1.5)}
}
/* ----------------------------------------------------------- */
.header-1:hover{
    animation-name: up;
    animation-duration: 2s;
}
.header-2:hover{
    animation-name: up;
    animation-duration: 2s;
}
.header-3:hover{
    animation-name: up;
    animation-duration: 2s;
}
.intro-box:hover{
    animation-name: up;
    animation-duration: 2s;
    transition: all 1s linear;
}

.photo-box1:hover{
    animation-name: up;
    animation-duration: 2s;
    transition: all 1s linear;
}

.photo-box2:hover{
    animation-name: up;
    animation-duration: 2s;
    transition: all 1s linear;
}
.photo-box3:hover{
    animation-name: up;
    animation-duration: 2s;
    transition: all 1s linear;
}
.photo-box4:hover{
    animation-name: up;
    animation-duration: 2s;
    transition: all 1s linear;
}

.knowmore:hover{
    animation-name: dark;
    animation-duration: 0.5s;
    transition: ease-in-out;
}

.header-more:hover{
    animation-name: big;
    animation-duration: 1s;
}